<template>
	<view class="pageBg">
		<view class="item">
			<item   :data="fromData" noboder></item>
		</view>
		<view class="mapCard">
			<map name="map" @click="navApp" :title="fromData.name" class="map" :latitude="fromData.latitude" :longitude="fromData.longitude"></map>
			<view class="adderss" @click="navApp">
				<image class="icon" src="/static/images/adderss.png" mode=""></image>
				<view class="text">
					{{ fromData.address }}
				</view>
			</view>
		</view>
		<view class="qrcoder spaceEvenly" v-if="fromData.t_tstatus==0">
			<uqrcode  ref="uqrcode" size="410" sizeUnit="rpx" class="uqrcode" canvas-id="qrcode" :value="hashPassword"></uqrcode>
			<view class="numberOfPeople">平台增票（{{ fromData.total_num - fromData.residue_num }}人次）</view>
		</view>
	</view>
</template>

<script>
	import item from '@/components/my/ticket/item.vue';
	import { mapNav } from '@/utils/mixins.js';
	import { encrypt, decrypt } from '@/utils/AES.js';
	export default {
		mixins: [mapNav],
		components: {
			item,
		},

		data() {
			return {
				id: null,
				oid: null,
				fromData: {},
				initTimer: null,
				hashPassword: '',
			};
		},
		onLoad({ id, oid }) {
			this.id = id && id != 'undefined' ? id : null;
			this.oid = oid && oid != 'undefined' ? oid : null;

			this.init();
			this.clear();
			this.initTimer = setInterval(() => {
				this.init();
			}, 2000);
		},
		onHide() {
			this.clear();
		},
		onUnload() {
			this.clear();
		},
		beforeDestroy() {
			this.clear();
		},
		onBackPress(e) {
			this.clear();
		},
		methods: {
			clear() {
				clearInterval(this.initTimer);
				this.initTimer = null;
			},
			async init() {
				let obj = { tid: this.id, oid: this.oid };
				for (let i in obj) {
					if (!obj[i]) {
						delete obj[i];
					}
				}
				const { data } = await this.$api.TcketGetDetail(obj);
				if (JSON.stringify(this.fromData) === JSON.stringify(data)) {
					return;
				}
				this.fromData = data;
				this.hashPassword = encrypt(this.fromData.tid);
			},
		},
	};
</script>

<style lang="scss" scoped>
	.pageBg {
		.item {
			margin: $submargin-width auto;
			width: 690rpx;
			background: #fff;
			border-radius: 20rpx;
			overflow: hidden;
		}
		.mapCard {
			width: 690rpx;
			height: 288rpx;
			background: #ffffff;
			margin: $submargin-width auto;
			border-radius: 20rpx;
			.map {
				width: 650rpx;
				height: 200rpx;
				margin: $submargin-width;
			}
			.adderss {
				width: 650rpx;
				display: flex;
				align-items: center;
				margin: 0 auto;
				font-size: $uni-font-size-10;
				color: #999999;
				padding-bottom: $submargin-width;
				border-bottom: 1rpx solid #dddddd;
				.icon {
					width: 25.33rpx;
					height: 28rpx;
					margin-right: 10rpx;
				}
			}
		}
		.qrcoder {
			width: 690rpx;
			height: 529rpx;
			background: #ffffff;
			margin: $submargin-width auto;
			border-radius: 20rpx;
			align-items: center;
			flex-direction: column;

			.numberOfPeople {
				width: 100%;
				text-align: center;
				color: $price-color;
				font-size: $uni-font-size-12;
			}
		}
	}
</style>
